<template>
  <view class="">
    <view class="background">
      <view class="w">
        <view class="" style="line-height: 80rpx; margin-left: 30rpx;">
          居民信息
        </view>
         <view class="list">
           <view class="ww">
             <view style="line-height: 80rpx; border-bottom: 1px solid #eeeeee;">楼栋房号</view>
             <view class="left">
               <text>楼栋房号</text>
               <text>姓名</text>
               <text>身份证号</text>
              <text>性别</text>
              <text>联系电话</text>
             </view>
             <view class="right">
               <text>请选择楼栋信息></text>
               <input type="text" value="" placeholder="请填写姓名" style="height: 95rpx;"/>
              <input type="text" value="" placeholder="请填写身份证号" style="height: 95rpx;"/>
               <picker mode="selector" :range="array" @change="picker1" :value="index" style="border-bottom: 1px solid #eee;height: 95rpx;">
                      <view>{{array[index]}}</view>
                  </picker>         
              <input type="text" value="" placeholder="请填写联系电话" style="height: 95rpx;"/>
             </view>
           </view>
             
           </view>
         </view>
            <button type="default" style="width: 515rpx; background-color: #5da5f1; border-radius:80rpx;color:#fff">提交</button>
         </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
    data() {
        return {
            array:['保密','男','女'],
            index:0
        }
    },
    methods: {
        picker1(e){
            console.log(e)
            this.index = e.detail.value
        }
    }
}
</script>

<style>
  .w{
    height:900rpx;
  }
  .background{
    background-color:rgb(240, 240, 240) ;
  }
  .ww{
    width:685rpx;
    margin:0 auto;
  }
  .list{
    background-color: #FFFFFF;
    height:1000rpx;
    margin-bottom: 20rpx;
  }
  .list .left text{
    display: block;
    line-height: 95rpx;
    border-bottom: 1px solid #eee;
  }
  .list .left{
    text-align: left;
    float:left;
  }
  .list .right{
    text-align: right;
    color:#999;
  }
  .list .right text{
    display: block;
    line-height: 95rpx;
    border-bottom: 1px solid #eee;
  }
  .list .right input{
    display: block;
    line-height: 95rpx;
    border-bottom: 1px solid #eee;
  }
</style>